iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 13
1
自我挑戰組

網頁學習日誌系列 第 13

jQuery : 票價顯示

  • 分享至 

  • xImage
  •  

想法:

年底要到台北跟三五好友去跨年,想要搭火車去台北,車票多少錢?

程式需求:

不用按鈕,直接輸入「數量」可立即看到總金額 (數量*票價)

重點語法:

$(this) : 觸發事件的當前元素
closest() : 往上查找 只要找到符合條件的 就停止尋找
val():獲取數值
find() : 搜索元素

HTML:

  • 利用ul li建立火車票價欄位。
  • li裡面都含「路線標題」、「票價/1人」、「車票數」、「價錢」
  • 「車票數」預設值為1
  • 最下方的「價錢」設置 id,程式運算的結果放在此,使它即時更新價錢

其他:data 為html5新增的屬性,可以暫存數值或是程式來存取資料
W3C data屬性:https://www.w3schools.com/tags/att_global_data.asp

<h2>火車 票價表:</h2>
<ul>
  <li class="ticket" data-price ="300">
    <h4>高雄台南來回</h4>
    <p>$300/1人</p>
    <p>數量:
      <input type="number" class="quantity" value ="1">
    </p>
    <p>價錢:$<span id ="total">300</span></p>
  </li>
  <li class="ticket" data-price ="500">
    <h4>台中台北來回</h4>
    <p>$500/1人</p>
    <p>數量:
      <input type="number" class="quantity" value ="1">
    </p>
    <p>價錢:$<span id ="total">500</span></p>
  </li>
  <li class="ticket" data-price ="800">
    <h4>高雄台北來回</h4>
    <p>$800/1人</p>
    <p>數量:
      <input type="number" class="quantity" value ="1">
    </p>
    <p>價錢:$<span id ="total">800</span></p>
  </li>
</ul>

jQuery:

因為不要按鈕,所以要想輸入就得到結果,就是監聽「鍵盤事件」:
「keypress」、「keydown」、「keyup」
這次案例因為輸入鍵盤要即時顯示價錢,所以適用「keyup」輸入即顯示。

  $('.ticket').on( 'keyup','.quantity',function(){
   
  });

在這監聽事件要做到下列事情:

  • 獲取車票單價(data-price)
  • 得到input項目中輸入的數量
  • 根據單價乘以數量得到總價,並顯示

獲取車票單價(data-price):取得數值

//獲取車票單價(data-price)
var price = $(this).closest('.ticket').data('price');
//表達式前面加 + 則傳回計算用的數值,就能運算
var price = +$(this).closest('.ticket').data('price');

得到input項目中輸入的數量

 // 觸發keyup事件為input,用this得到input元素,要得到input輸入的數值,用val()
 var quantity = $(this).val();
 //表達式前面加 + 則傳回計算用的數值,就能運算
 var quantity = +$(this).val();

根據單價乘以數量得到總價,並顯示

//觸發keyup事件往上找'.ticket',並往下找到'#total'
$(this).closest('.ticket').find('#total');
//在'#total'放置 價格和數量相乘的結果
$(this).closest('.ticket').find('#total').text(price*quantity);

結果如圖:

https://ithelp.ithome.com.tw/upload/images/20200411/20107321viuj0IWEn2.png

但是滑鼠去點擊增加則沒反應,所以要再增加滑鼠事件。

https://ithelp.ithome.com.tw/upload/images/20200411/20107321AUnavrZpCT.png

新增click監控事件,內容與keyup相同

 $('.ticket').on( 'click','.quantity',function(){
 //與keyup同樣內容
 }

結果如下:

codepen網址:https://codepen.io/yuski/pen/eymYRM

https://ithelp.ithome.com.tw/upload/images/20200411/201073214KteFrWe55.png


上一篇
jQuery :尋找餐廳
下一篇
jQuery : 小說閱讀
系列文
網頁學習日誌30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言